<template>
	<cl-dialog title="退定金详情" width="500px" :visible.sync="visible" @close="close">
		<el-form label-width="120px">
			<el-form-item label="审核状态：">
				<span class="color-primary">{{ detail.yn | filterYn }}</span>
			</el-form-item>
			<el-form-item label="银联退款：">
				<span class="color-primary">{{ detail.refund_info || '-' }}</span>
			</el-form-item>
			<el-form-item label="审核记录：">
				<ul class="mes-list">
					<template v-if="detail.suc && Object.keys(detail.suc).length">
						<li>
							<div class="mes">{{ detail.suc.mes }}</div>
							<div>
								({{ detail.suc.id_add_user_name }}：{{
									(detail.suc.create_date * 1000)
										| dateFormat("YYYY-MM-DD HH:mm:ss")
								}})
							</div>
							<el-image
								v-for="(img, i) in isArr(detail.suc.images)"
								:key="i"
								:src="`${img}?x-oss-process=image/resize,limit_0,m_fill,w_50,h_50`"
								:preview-src-list="isArr(detail.suc.images)"
								class="refimage"
								:z-index="3000"
								fit="cover"
							/>
						</li>
					</template>
					<template v-if="detail.mes && detail.mes.length">
						<li v-for="item in detail.mes" :key="item.id">
							<div class="mes">{{ item.mes }}</div>
							<div>
								({{ item.id_add_user_name }}：{{
									(item.create_time * 1000) | dateFormat("YYYY-MM-DD HH:mm:ss")
								}})
							</div>
						</li>
					</template>
					<span v-else>-</span>
				</ul>
			</el-form-item>
			<el-form-item label="退定金时间：">{{
				(detail.create_time * 1000) | dateFormat("YYYY-MM-DD HH:mm:ss")
			}}</el-form-item>
			<el-form-item label="退还金额：">{{ detail.back_money }}</el-form-item>
			<el-form-item label="退款方式：">{{ detail.back_type | filterBackType }}</el-form-item>
			<el-form-item label="退款人姓名：">{{ detail.back_user_name }}</el-form-item>
			<el-form-item label="退款人账号：">{{ detail.back_user_account }}</el-form-item>
			<el-form-item label="退款凭证：">
				<template v-if="detail.images">
					<el-image
						class="img-item"
						v-for="(item, index) in detail.images"
						:key="index"
						:src="`${item}?x-oss-process=image/resize,limit_0,m_fill,w_100,h_100`"
						:preview-src-list="detail.images"
						:z-index="3000"
						fit="cover"
					/>
				</template>
				<span v-else>-</span>
			</el-form-item>
			<el-form-item label="退款原因：">{{ detail.back_why }}</el-form-item>
			<el-form-item label="定金备注：">{{
				!detail.dep_meno ? "-" : detail.dep_meno
			}}</el-form-item>

			<el-form-item label="提交人：">{{ detail.id_add_user_name }}</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
		</template>
	</cl-dialog>
</template>
<script>
	const statusType = {
		0: { text: "已驳回" },
		1: { text: "待审核" },
		3: { text: "未打款" },
		4: { text: "已打款" },
		5: { text: "已恢复" }
	};
	const filterYn = (val, key = "text") => {
		return statusType[val] ? statusType[val][key] : "";
	};
	export default {
		data() {
			return {
				visible: false,
				detail: {
					images: []
				}
			};
		},
		methods: {
			open(data = {}) {
				this.visible = true;
				this.getDetail(data);
			},
			close() {
				this.visible = false;
			},
			async getDetail(info) {
				const data = await this.$service.deposit.getrefunduse({ dep_id: info.dep_id });
				this.detail = { ...data };
			},
			isArr(val) {
				if (!Array.isArray(val)) {
					return val.split(",");
				}
				return val;
			}
		},
		filters: {
			filterBackType(val) {
				switch (val) {
					case 1:
						val = "微信";
						break;
					case 2:
						val = "支付宝";
						break;
					case 3:
						val = "银行卡";
						break;
					default:
						val = "-";
						break;
				}
				return val;
			},
			filterYn
		}
	};
</script>
<style lang="scss" scoped>
	.refimage {
		width: 50px;
		height: 50px;
		margin-right: 10px;
		margin-top: 10px;
	}
	::v-deep {
		.el-form-item {
			margin-bottom: 10px !important;
		}
	}
	.mes-list {
		list-style: none;
		padding-top: 6px;
		line-height: normal;
		li {
			color: #909399;
			& + li {
				margin-top: 10px;
			}
			.mes {
				color: #333;
			}
		}
	}
	.img-item {
		width: 100px;
		height: 100px;
		+ .img-item {
			margin-left: 10px;
		}
	}
</style>
